<script setup>
import {
  ElDialog,
  ElButton,
  ElRow,
  ElCol,
  ElTag,
  ElInputNumber,
  ElMessage,
  ElMessageBox,
} from "element-plus";
import CustomModal from "@/components/CustomModal/";
import { getCurentDate, transformNumber, toPercent } from "@/hooks/useCommon";
import { ref, computed, watchEffect } from "vue";
import { fixedInvestEditPlannedAmount } from "@/api/investPaper/";
const props = defineProps({
  init: { type: Object, default: () => ({}) },
  visible: { type: Boolean, default: false },
});
const emit = defineEmits(["update:visible", "finish"]);
const open = computed({
  get() {
    return props.visible;
  },
  set(val) {
    emit("update:visible", val);
  },
});

const { curDay, curMonth, curYear } = getCurentDate();

const currentMonth = computed(() => (curDay > 7 ? curMonth + 1 : curMonth - 1));

const amount = ref(props.init.plannedAmountAdj || 0);
const form = ref();
const percent = computed(() =>
  toPercent(
    amount.value - props.init.plannedAmountOri,
    props.init.plannedAmountOri
  )
);
const changeNumber = computed(() => {
  const num = amount.value - props.init.plannedAmountOri;
  return `${num > 0 ? `+` : ``}${num}`;
});

const onFinish = async () => {
  open.value = false;
  ElMessageBox.confirm("你确定要调整吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      const { code } = await fixedInvestEditPlannedAmount({
        projectId: props.init.fixedProjectId,
        amount: amount.value,
      }).catch(() => {
        open.value = true;
      });
      if (code != "200") return;
      ElMessage.success("调整成功");
      handleFinish();
    })
    .catch(() => {
      open.value = true;
    });
};
const onCancel = () => {
  handleFinish();
};
const handleFinish = (flag = false) => {
  open.value = flag;
  emit("finish");
  amount.value = 0;
};
</script>

<template>
  <CustomModal
    width="30%"
    teleport="#app"
    :title="'年度计划调整'"
    v-model:visible="open"
    :footerButton="false"
  >
    <el-form ref="form" label-position="top" label-width="auto">
      <el-form-item required label="项目名称">
        <el-input :value="props.init.projectName" disabled />
      </el-form-item>
      <el-form-item required :label="`${curYear}年年初计划（元）`">
        <el-input
          :value="transformNumber(props.init.plannedAmountOri)"
          disabled
        />
      </el-form-item>

      <el-form-item required label="调整后金额（元）">
        <div style="display: flex; align-items: center; width: 100%">
          <el-input-number
            v-model="amount"
            style="width: 100%; text-align: left"
            :controls="false"
          >
          </el-input-number>
          <span style="margin-left: 10px">元</span>
        </div>
      </el-form-item>

      <el-row :gutter="10">
        <el-col :span="12"
          >调整差额：<b> {{ transformNumber(changeNumber) }}</b></el-col
        >
        <el-col :span="12"
          >调整率：<b>{{ percent }}</b></el-col
        >
      </el-row>
      <div style="padding: 30px 10px 0; display: flex; justify-content: center">
        <el-button type="primary" @click="onCancel">取消</el-button>

        <el-button color="#FC7018" style="color: #ffffff" @click="onFinish"
          >提交</el-button
        >
      </div>
    </el-form>
  </CustomModal>
</template>

<style scoped lang="scss">
:deep(.el-form) {
  .el-form-item .el-form-item__label {
    height: auto;
  }
  .el-input-number .el-input__inner {
    text-align: left;
  }
}
</style>
